<#import "/common/base.ftl" as base/>
<#import "/common/button.ftl" as but/>
<#import "/common/tableOpt.ftl" as tabt/>
<#import "/common/widget.ftl" as widget/>
<#assign jses=[
"/js/service/protocol.js",
"/js/app/protocol.js"] in base/>
<#assign csses=["/webjars/1.0.0/css/colors.css","/css/protocol.css"] in base/>
<@base.page "">
    <!-- -->
    <div class="grid-content bg-purple-light" id="main_content">
        <el-col :span="24" class="content-wrapper">
            <section>
                <el-col :span="24" class="toolbar">
                    <el-row>
                        <el-button type="success" plain size="small" icon="el-icon-plus" @click="add()">添加</el-button>
                        <el-upload
                                class="upload-demo inline-block"
                                action="#"
                                :http-request="uploadHttpRequest"
                                multiple
                                accept=".xml,.csv"
                                :on-success="importSuccess"
                                :on-exceed="handleExceed"
                                :show-file-list="false"
                        >
                            <el-button type="primary" plain size="small" icon="el-icon-download">导入</el-button>
                        </el-upload>
                    </el-row>
                    <el-form inline="true" :model="searchVm">
                        <el-form-item label="">
                            <el-input style="width: 150px;" v-model="searchVm.name" clearable placeholder="协议库/Mib名"
                                      clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-select style="width: 150px;" v-model="searchVm.netId" clearable placeholder="网关"
                                       @click.native="selectorPulled"
                                       :loading="selectorLoading"
                                       clearable="true">
                                <el-option v-for="item in nets" :value="item.id" :key="item.id"
                                           :label="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="">
                            <el-select style="width: 150px;" v-model="searchVm.stype" clearable placeholder="类型"
                                       clearable="true">
                                <el-option v-for="item in options" :value="item.value" :key="item.value"
                                           :label="item.label"></el-option>
                            </el-select>
                        </el-form-item>
                        <@but.search "search()" ":loading='tableVm.loading'"/>
                    </el-form>
                    <!--表格-->
                    <el-table ref="multipleTable" stripe :data="tableVm.data" border style="width: 100%"
                              v-loading="tableVm.loading">
                        <el-table-column prop="name" label="协议名/Mib名" min-width="100"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column prop="netName" label="网关" min-width="100"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column prop="snmpv" label="SNMP版本" min-width="100"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column prop="stype" label="类型" min-width="100"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column label="操作" min-width="300">
                            <template scope="scope">
                                <@tabt.edit "edit(scope.$index,scope.row)" />
                                <el-button type="success" icon="el-icon-connection" size="mini"
                                           v-if="scope.row.stype=='snmp'"
                                           @click="goConfig(scope.row.stype,tableVm.data[scope.$index].id,scope.row.name)">
                                    SNMP配置
                                </el-button>
                                <el-button type="success" icon="el-icon-connection" size="mini"
                                           v-if="scope.row.stype =='捷宸'"
                                           @click="goConfig(scope.row.stype,tableVm.data[scope.$index].id,scope.row.name)">
                                    协议配置
                                </el-button>
                                <el-button type="success" icon="el-icon-connection" size="mini"
                                           v-if="scope.row.stype =='RePing'"
                                           @click="goConfig(scope.row.stype,tableVm.data[scope.$index].id,scope.row.name)">
                                    RePing协议
                                </el-button>
                                <el-button type="success" icon="el-icon-connection" size="mini"
                                           v-if="scope.row.stype=='snmp'"
                                           @click="goTrapList(tableVm.data[scope.$index].id,scope.row.name)">Trap list
                                </el-button>
                                <el-popover placement="top"
                                            width="160"
                                            v-if="scope.row.stype !='RePing'"
                                >
                                    <p>请选择导出格式</p>
                                    <div style="text-align: right; margin: 0">
                                        <el-button size="mini" @click="excelOutput(scope.row.name,scope.row.id)">.csv</el-button>
                                        <el-button size="mini" @click="output(scope.row.name,scope.row.id)">.xml</el-button>
                                    </div>
                                    <el-button type="primary" icon="el-icon-top" size="mini"
                                               slot="reference"
                                               @click="chooseOut(scope.$index)">
                                        导出
                                    </el-button>
                                </el-popover>
                                <@tabt.delete "mdeleteRow(scope.row)" />
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block">
                        <el-pagination @current-change="handleCurrentChange" :current-page="tableVm.pageIndex"
                                       :page-size="tableVm.pageSize" layout="prev, pager, next, jumper"
                                       :total="tableVm.total"></el-pagination>
                    </div>
                    <!--添加界面-->
                    <el-dialog :title="editVm.oprate" :visible.sync="editVm.visible" width="900px"
                               ref="editVm.addTitle">
                        <el-form :model="editVm.data" label-width="150px" :rules="editVm.editFormRules.formRules"
                                 ref="editForm">
                            <el-row>
                                <el-form-item label="类型" prop="stype">
                                    <el-select v-model="editVm.data.stype" :disabled="editVm.oprate=='编辑'"
                                               maxlength="20" placeholder="选择协议类型">
                                        <el-option v-for="item in options" :value="item.value" :key="item.value"
                                                   :label="item.label"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="协议名称" prop="name" v-if="editVm.data.stype==options[0].value || editVm.data.stype==options[2].value">
                                    <el-input v-model="editVm.data.name" :disabled="!editVm.isEdit" maxlength="20"
                                              placeholder="自定义名称"></el-input>
                                </el-form-item>
                                <el-form-item label="Mib库名" prop="name" v-if="editVm.data.stype==options[1].value">
                                    <el-input v-model="editVm.data.name" :disabled="!editVm.isEdit" maxlength="20"
                                              placeholder="自定义名称"></el-input>
                                </el-form-item>
                                <el-form-item label="选择网关" prop="netId" v-if="editVm.data.stype==options[0].value">
                                    <el-select v-model="editVm.data.netId" :disabled="!editVm.isEdit" maxlength="20"
                                               @click.native="selectorPulled"
                                               :loading="selectorLoading"
                                               placeholder="选择可用网关">
                                        <el-option v-for="item in nets" :value="item.id" :key="item.id"
                                                   :label="item.name"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="协议版本" prop="snmpv" v-if="editVm.data.stype==options[1].value">
                                    <el-select v-model="editVm.data.snmpv" :disabled="!editVm.isEdit" maxlength="20"
                                               placeholder="选择协议版本">
                                        <el-option v-for="item in snmp_versions" :value="item.value" :key="item.value"
                                                   :label="item.label"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="备注" prop="remark">
                                    <el-input v-model="editVm.data.remark" :disabled="!editVm.isEdit" maxlength="20"
                                              placeholder="可在此处添加备注"></el-input>
                                </el-form-item>
                            </el-row>
                        </el-form>
                        <div solt="footer" class="dialog-footer">
                            <@but.back "editVm.visible = false" />
                            <#--						<@but.save "add(editVm,mySave,beforeNewSave)" 'v-if="editVm.isEdit" :loading="editVm.loading"'/>-->
                            <@but.save "save(editVm)" 'v-if="editVm.isEdit" :loading="editVm.loading"'/>
                        </div>
                    </el-dialog>
                </el-col>
            </section>
        </el-col>
    </div>
</@base.page>